<script setup>
import { ref, computed } from 'vue'
import Item from './components/item.vue'

const deviceList = ref([
  {
    id: 1,
    name: '一体机',
    children: [
      {
        id: 1,
        name: '北扶激光血糖血铜尿酸分析仪',
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F20%2F20200320102351_dPZ4f.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1709174478&t=082f8017b2b7ed7a162b4e0803cc72f2',
        model: '金芒果I/II/III',
        deviceSN: 'MG04235200292',
      },
    ],
  },
  {
    id: 2,
    name: '血糖仪',
    children: [
      {
        id: 2,
        name: '北扶激光血糖仪',
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F20%2F20200320102351_dPZ4f.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1709174478&t=082f8017b2b7ed7a162b4e0803cc72f2',
        model: '芒果I/II/III',
        deviceSN: 'MG04235200292',
      },
    ],
  },
])
const currIndex = ref(0)

const subDeviceList = computed(() => {
  return deviceList.value[currIndex.value]?.children || []
})

const handleBinding = (val) => {
  console.log(val)
  uni.navigateTo({ url: `/pagesMember/device/device?name=${val}` })
}
</script>

<template>
  <view class="viewport">
    <!-- 分类 -->
    <view class="categories">
      <!-- 左侧：一级分类 -->
      <scroll-view class="primary" scroll-y>
        <view
          v-for="(item, index) in deviceList"
          :key="item.id"
          class="item"
          :class="{ active: index === currIndex }"
          @tap="currIndex = index"
        >
          <text class="name"> {{ item.name }} </text>
        </view>
      </scroll-view>
      <!-- 右侧：二级分类 -->
      <scroll-view class="secondary" scroll-y>
        <!-- 内容区域 -->
        <view class="panel">
          <Item :subDeviceList="subDeviceList" @onBinding="handleBinding" />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* 分类 */
.categories {
  flex: 1;
  min-height: 400rpx;
  display: flex;
}
/* 一级分类 */
.primary {
  overflow: hidden;
  width: 180rpx;
  flex: none;
  background-color: #f6f6f6;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 96rpx;
    font-size: 26rpx;
    color: #595c63;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      left: 42rpx;
      bottom: 0;
      width: 96rpx;
      border-top: 1rpx solid #e3e4e7;
    }
  }
  .active {
    background-color: #fff;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 8rpx;
      height: 100%;
      background-color: #27ba9b;
    }
  }
}
.primary .item:last-child::after,
.primary .active::after {
  display: none;
}
/* 二级分类 */
.secondary {
  background-color: #fff;
  .carousel {
    height: 200rpx;
    margin: 0 30rpx 20rpx;
    border-radius: 4rpx;
    overflow: hidden;
  }
  .panel {
    margin: 0 30rpx 0rpx;
  }
}
</style>
